<script setup lang="ts">
import { ref, Ref, reactive, toRefs } from 'vue'
import axios from "../api/request";
// import axios from "axios";
// let 、const的作用命令相同，只是申明所在块级作用域有效。const申明变量不得改变值，一旦申明后必须初始化。（初始化就是给值）

let data:{res:{}}=reactive({res:{}});
const aaa =ref(666);

//在异步里面赋值使用reactive和ref没有响应式,reactive赋值的对象要给里面的属性，ref的解包场景有很多需要注意
 setTimeout(()=>{
    console.log(data)
 },1000)

 function fun():void{
    const aaa =ref(666);
 }



 axios.post('/goods/goodAll').then(respose => {
    // data =reactive<{}>(respose.data) 错误写法
    data.res =respose.data

    console.log('测试',respose.data)
 }).catch(error => {
    console.log(error,888)
})

//验证vue的接口代理和后端的配置中间件处理结果(跨域)
// axios.get('nodeServer/123').then(respose => {
axios.get('http://127.0.0.1:8888/123').then(respose => {
    console.log('nodeServer的数据',respose)
 }).catch(error => {
})


//验证jsonp(跨域)

let jsonp = function jsonp(url:string):void{
   let domScript = document.createElement('script')
   domScript.src = url;
   domScript.type = 'text/javascript';
   document.getElementsByTagName('body')[0].appendChild(domScript)
   //在window上添加属性getUser
   let _window = window as any
   //在ts下直接在window上加属性会报错
   //https://www.jianshu.com/p/d3c419c30b49
   //xxx.d.ts是干嘛的？？
   _window['getUser'] = (res:string)=>{
      alert(res)
   }
}


</script>

<template>
    <h1>mock数据模拟</h1>
    <div>
        在异步里面赋值使用reactive和ref没有响应式,reactive赋值的对象要给里面的属性，ref的解包场景有很多需要注意
    </div>
    <el-divider />
    <div>{{'mock数据'}}-----{{data}}</div>
    <div>{{aaa}}</div>
    <button @click="jsonp('http://localhost:8888/getUser?callback=getUser')">按钮</button>
</template>

<style scoped>
</style>
